<template>
  <!-- 问答页面提问 -->
  <div>
    <van-nav-bar>
      <template #left>
        <span class="span" @click="onClickLeft()">取消</span>
      </template>
      <template #right>
        <div class="btn" @click="publish">发布</div>
      </template>
    </van-nav-bar>
    <div class="backg">
      <van-cell-group>
        <van-field
          v-model="value"
          placeholder="请填写你的问题"
          maxlength="20"
          @blur="checkValue"
        />
        <van-field
          v-model="message"
          rows="7"
          autosize
          type="textarea"
          placeholder="请填写你的具体描述"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
export default {
  data() {
    return {
      message: "",
      value: "",
    };
  },
  methods: {
    onClickLeft() {
      return this.$router.go(-1);
    },
    checkValue() {
      if (this.value.trim() != "") {
        return true;
      } else {
        return false;
      }
    },

    publish() {
      if (this.checkValue()) {
        //上传成功提示
        Notify({ type: "success", message: "上传成功", duration: 1000 });
        // 跳转到个人中心发布作品页面
        return this.$router.go(-1);
      } else {
        //发布失败提示
        Notify({
          type: "danger",
          message: "请输入有效问题",
          duration: 1000,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  width: 70px;
  height: 30px;
  font-size: 14px;
  color: #fff;
  background-color: #e98b71;
  border: 1px solid #e98b71;
  border-radius: 30px;
  text-align: center;
  line-height: 30px;
}
.span {
  color: #ff7f24;
}
.backg {
  background-color: #fff;
  height: calc(100vh - 46px);
}
</style>
